
import React from 'react';
import { TrendingUp, PieChart, ArrowUpRight, Activity, Stethoscope } from 'lucide-react';

const MedicalDashboard = () => {
  const metrics = [
    {
      title: '趋势分析',
      value: '92.5%',
      change: '+5.2%',
      icon: TrendingUp,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50'
    },
    {
      title: '数据占比',
      value: '68.3%',
      change: '+2.1%',
      icon: PieChart,
      color: 'text-green-600',
      bgColor: 'bg-green-50'
    },
    {
      title: '增长指标',
      value: '156.8',
      change: '+12.4%',
      icon: ArrowUpRight,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50'
    },
    {
      title: '活跃度',
      value: '89.2%',
      change: '+3.7%',
      icon: Activity,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50'
    },
    {
      title: '诊断效率',
      value: '94.1%',
      change: '+1.8%',
      icon: Stethoscope,
      color: 'text-red-600',
      bgColor: 'bg-red-50'
    }
  ];

  return (
    <div className="w-full h-screen bg-slate-50 flex items-center justify-center p-4 sm:p-8 font-sans overflow-hidden relative selection:bg-blue-100">
      
      {/* PPT 容器 (16:9 比例) */}
      <div className="relative w-full max-w-7xl aspect-video bg-white shadow-2xl rounded-2xl overflow-hidden flex flex-col border border-slate-100 ring-1 ring-black/5">
        
        {/* 背景装饰 */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-slate-50/50 skew-x-12 transform origin-top-right"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-60"></div>

        {/* 顶部栏：Logo与导航 */}
        <div className="flex justify-between items-center px-12 py-8 z-20">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
              <Stethoscope className="w-4 h-4 text-white" />
            </div>
            <h1 className="text-2xl font-bold text-slate-800">医疗数据中心</h1>
          </div>
          
          <div className="flex items-center space-x-6 text-sm text-slate-600">
            <span className="hover:text-blue-600 cursor-pointer transition-colors">实时监控</span>
            <span className="hover:text-blue-600 cursor-pointer transition-colors">数据分析</span>
            <span className="hover:text-blue-600 cursor-pointer transition-colors">报告中心</span>
            <span className="hover:text-blue-600 cursor-pointer transition-colors">系统设置</span>
          </div>
        </div>

        {/* 主要内容区域 */}
        <div className="flex-1 flex items-center justify-center px-12 pb-12 z-10">
          <div className="grid grid-cols-5 gap-6 w-full max-w-6xl">
            {metrics.map((metric, index) => {
              const Icon = metric.icon;
              return (
                <div 
                  key={index}
                  className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 border border-slate-100 animate-fade-in"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="flex items-center justify-between mb-4">
                    <div className={`w-12 h-12 rounded-lg ${metric.bgColor} flex items-center justify-center`}>
                      <Icon className={`w-6 h-6 ${metric.color}`} />
                    </div>
                    <span className="text-sm font-medium text-green-600 bg-green-100 px-2 py-1 rounded-full">
                      {metric.change}
                    </span>
                  </div>
                  
                  <div className="space-y-2">
                    <h3 className="text-sm font-medium text-slate-600">{metric.title}</h3>
                    <p className="text-3xl font-bold text-slate-800">{metric.value}</p>
                  </div>
                  
                  {/* 进度条 */}
                  <div className="mt-4 bg-slate-100 rounded-full h-2">
                    <div 
                      className={`h-2 rounded-full transition-all duration-1000 ${metric.color.replace('text', 'bg')}`}
                      style={{ 
                        width: metric.value,
                        animationDelay: `${index * 0.2}s`
                      }}
                    ></div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* 底部状态栏 */}
        <div className="absolute bottom-0 left-0 right-0 bg-slate-50/80 backdrop-blur-sm border-t border-slate-200 px-12 py-4">
          <div className="flex justify-between items-center text-sm text-slate-600">
            <div className="flex items-center space-x-4">
              <span className="flex items-center space-x-2">
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                <span>系统正常运行</span>
              </span>
              <span>最后更新: 2025-12-03 15:30:00</span>
            </div>
            <div className="flex items-center space-x-4">
              <span>在线用户: 1,247</span>
              <span>今日访问量: 8,932</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

function App() {
  return <MedicalDashboard />;
}

export default App;
